import React, { useCallback, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'

import {
  NavBar,
  Icon
} from 'antd-mobile'

import {
  DetailWrap
} from './StyledDetail'

import { get } from '@/utils/http'

const Detail = (props) => {
  const { goBack } = useHistory()
  const { state } = useLocation()

  const handleLeftClick = useCallback(
    () => {
      goBack()
    },
    [goBack],
  )

  useEffect(() => {
    console.log(state.id)
  }, [state])

  return (
    <DetailWrap>
      <NavBar
        mode="dark"
        icon={<Icon type="left" />}
        onLeftClick={handleLeftClick}
        style={{backgroundColor: '#ee742f' }}
      >
        详情页
      </NavBar>
      <div>
        <div>
          <img src="http://s1.cdn.jiaonizuocai.com/videoImg/201510/1313/561c9a314c8bb.jpg/OTAweDYwMA" alt=""/>
        </div>
        <div className="details">
          <h1>宫保鸡丁</h1>
          <h3>23567浏览 9560收藏</h3>
          <button>收藏</button>
        </div>
      </div>
    </DetailWrap>
  )
}

export default Detail